<template>
    <Panel   shadow :padding="10">
      <el-table
        :data="section"
        style="width: 100%">
        <el-table-column
          label="标题"
          prop="name"          >
        </el-table-column>        
        <el-table-column
          label="内容"
          prop="detail"  width="400px"        >
          <template slot-scope='scope'>
            <div v-for="(item, index) in scope.row.detail" :key="index" style="padding:2px; border:1px solid burlywood; margin-bottom: 3px;">
              <p>题目：{{item.title}}</p>
              <div>题号：
                <div v-for="(problem, index) in item.problems" :key="index" style="display:inline" >{{problem._id}}: {{problem.title}}; </div>
              </div>
            </div>
          </template>
        </el-table-column>        
        <el-table-column
          label="时长"
          prop="video_duration"          >
        </el-table-column>
        <el-table-column
          label="题目数量"
          prop="problem_amount"          >
        </el-table-column>
        <el-table-column
          label="是否试听"
          prop="free_trail">
          <template slot-scope="scope">
            <p>{{scope.row.free_trail}}</p>
          </template>
        </el-table-column>        
        <el-table-column
          label="排序"
          prop="order"          >
        </el-table-column>        
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="编辑节" :visible.sync="editing" :close-on-click-modal = "false">
        <el-form  ref="form" :model="editsection">
          <el-form-item label="标题">
            <el-input  v-model="editsection.name"></el-input>
          </el-form-item>
          <el-form-item >                  
            <div v-for="(item, index) in editsection.detail" :key="index" style="padding:2px; border:1px solid burlywood; margin-bottom: 3px;" >
              <div>小节{{index+1}}：
                <el-input v-model="item.title"> </el-input>
              </div>
              <div> 视频地址
                <el-input v-model="item.video_url"></el-input>
              </div>
              练习题
              <div style="display: flex;" v-for="(problem, num) in item.problems">
                <el-input v-model="problem._id"  placeholder="题号"> </el-input>
                <el-input v-model="problem.title" placeholder="标题"> </el-input>
                <el-button @click="delProblem(index, num)">删除题目 </el-button>
              </div>
              <el-button @click="addProblem(index)">新增题目 </el-button>
              <el-button @click="delClip(index)" type="danger">删除小节 </el-button>
            </div>
            <el-button @click="addClip" >新增小节</el-button>
          </el-form-item>
          <el-form-item label="时长">
            <el-input v-model="editsection.video_duration"></el-input>
          </el-form-item>
          <el-form-item label="题目数量">
            <el-input v-model="editsection.problem_amount"></el-input>
          </el-form-item>
          <el-form-item label="是否试听">
            <el-switch v-model="editsection.free_trail"></el-switch>
          </el-form-item>
          <el-form-item label="排序">
            <el-input v-model="editsection.order"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button v-if="!adding" type="primary" @click="onSubmit">更新</el-button>
            <el-button v-if="adding" type="primary" @click="onSubmit">新增</el-button>
          </el-form-item>
        </el-form>
      </el-dialog >
      <el-button style="margin-top:20px" type="primary" @click="addSection">
        新增
      </el-button>
    </Panel>
  </template>
  <script>
    import api from '../../api.js'
    import utils from '@/utils/utils'

    export default {
      name: 'chapter',
      data () {
        return {
          section: [],
          editsection: {},
          editing: false,
          adding: false,
          query: {},
          clip_problems: []
        }
      },
      mounted () {
        this.init()
      },
      methods: {
        init () {
          this.query.chapter_id = this.$route.query.chapter_id
          // this.changeRoute()
          this.getSectionList()
        },
        getSectionList () {
          api['getSection'](this.query.chapter_id).then((res) => {
            this.section = res.data.data
            console.log(this.section)
          }).catch()
        },
        changeRoute () {
          let query = Object.assign({}, this.query)
          this.$router.push({
            name: 'section',
            query: utils.filterEmptyValue(query)
          })
        },
        handleEdit (index, row) {
          this.editing = true
          this.editsection['id'] = this.section[index].id
          this.editsection['name'] = this.section[index].name
          this.editsection['problem_amount'] = this.section[index].problem_amount
          this.editsection['free_trail'] = this.section[index].free_trail
          this.editsection['order'] = this.section[index].order
          this.editsection['video_duration'] = this.section[index].video_duration
          this.editsection['chapter_id'] = this.section[index].chapter
          this.editsection['detail'] = this.section[index].detail
          this.editsection = JSON.parse(JSON.stringify(this.editsection))
          this.clip_problems = []
          console.log(this.editsection['detail'])
          this.editsection['detail'].forEach((clip) => {
            this.clip_problems.push(clip['problems'])
          })
          console.log(this.clip_problems)
          console.log(index, row.title)
        },
        onSubmit () {
          this.editsection['detail'].forEach((clip, index) => {
            clip['problems'] = this.clip_problems[index]
          })
          let params = this.editsection
          console.log('par', params)
          if (!this.adding) {
            api['editSection'](params).then((res) => {
              this.editing = false
              this.adding = false
              this.getSectionList()
            }).catch()
          } else {
            api['addSection'](params).then((res) => {
              this.editing = false
              this.adding = false
              this.getSectionList()
            }).catch()
          }
        },
        addSection () {
          this.editing = true
          this.adding = true
          this.editsection = {chapter_id: this.query.chapter_id, detail: []}
          this.clip_problems = []
        },
        addClip () {
          this.editsection['detail'].push({
            title: '',
            video_url: '',
            problems: []
          })
          this.clip_problems.push([])
        },
        delClip (index) {
          console.log(index)
          this.editsection['detail'].splice(index, 1)
          this.clip_problems.splice(index, 1)
        },
        addProblem (index) {
          this.editsection['detail'][index].problems.push({
            _id: '',
            title: ''
          })
        },
        delProblem (index, num) {
          this.editsection['detail'][index].problems.splice(num, 1)
          this.clip_problems.splice(num, 1)
        }
      }
    }
  </script>
  
  <style scoped lang="less">
  </style>
  